<script setup lang="ts">
import { RouterView } from 'vue-router';
import { ref,reactive,onMounted,useTemplateRef } from 'vue';
import ComponentA from './components/ComponentA.vue'  //./components/A.vue'//
import ComponentB from './components/ComponentB.vue'   //'./components/B.vue'//
import { useCounterStore } from './stores/store'
import { useUserStore } from './stores/user';
import { useRouter } from 'vue-router';
const userStore = useUserStore();
const store = useCounterStore()
const router=useRouter()

onMounted(() => {
  console.log(`the component is now mounted.`)
})
const mydiv=useTemplateRef('mydiv2')


const items = ref([{ message: 'Foo' }, { message: 'Bar' }, { message: 'Circle' }, { message: 'Rect' }])
const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})
const text = ref('Hello World')
const name = ref('Vue.js')
function greet(event:Event|undefined) {
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event?.target?.tagName)
  }

  mydiv.value.style.color='red'
}
function onLogout(){

  userStore.logout()

  router.push('/login')
}

</script>

<template>
<!-- <h1>{{ store.count }}</h1> -->

<button @click="onLogout" v-if="userStore.isAuthenticated">退出</button>


<!-- <ComponentA />
<ComponentB /> -->
<!-- <h1>{{ $translate('greetings.hello') }}</h1>

   -->
  <RouterView />

<!-- <ul>
  <li v-for="(item,key) in myObject">
   {{ key }} :{{ item }}
  </li>
</ul> -->
<!-- <div ref="mydiv2">aaaaaaa</div>
<button @click="greet">Greet</button>

<h1>{{ text }}</h1>
<input v-model.lazy="text"> -->
  
</template>

<style>
@import './assets/styles.css'; 


</style>
